.repl-result,
.repl-result-like {
  display: flex;
  flex-wrap: wrap;
  /* overflow: hidden; */
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repl-block.error .repl-result {
  flex-direction: column;
}
.repl-result[data-stream] {
  /* streaming output of stdout; make sure stderr occurs below */
  flex-direction: column;
}
.repl-result.overflow-visible {
  overflow: visible;
}
.repl-result > p:not(:first-child) {
  padding-top: 1rem;
}
.repl {
  .repl-prompt {
    --color-prompt-text: var(--color-brand-01);
    color: var(--color-prompt-text);
  }
  .repl-block:hover .repl-context {
    opacity: 1;
  }

  .repl-prompt-righty .repl-temporary {
    display: flex;
    align-items: center;
  }

  /* repl right-hand decorations */
  .repl-prompt-right-elements {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
  }
  .kui--repl-prompt-buttons {
    margin-right: 1rem;
  }
  .kui--repl-prompt-buttons .graphical-icon {
    opacity: 0.0375;
  }
  .kui--repl-block-error-icon {
    fill: var(--color-error);
    margin-right: 0.5rem;
  }
}

.repl-result,
.repl-result-like,
.repl-input .repl-input-element,
.repl-input-like {
  font-size: inherit;
}
.repl-block:not(.processing) .repl-result-like:last-child {
  margin-bottom: 0.375rem;
}
.repl-input .repl-input-element,
.repl-input-like {
  --color-caret: var(--color-base0A);
  color: var(--color-text-01);
  background: transparent;
  flex: 1;
  caret-color: var(--color-caret);
  padding: 0px; /* to match user-agent styling of <input/> */
  word-break: break-all;

  &:not(.repl-textarea) {
    border: none;
  }
}
.kui--prompt-like:empty {
  border-right: 1ex solid var(--color-caret);
}
.repl-input input:focus,
.repl-input-like:focus {
  outline: none;
}

.repl-block.valid-response .oops,
.repl-block.error .oops,
.clickable.oops,
.red-text {
  white-space: pre-wrap;
}
.repl-input {
  flex-wrap: wrap;
}
.repl-input,
.repl-output,
.repl-input-sourceref {
  display: flex;
}
.repl-block .result-vertical {
  display: flex;
  flex-direction: column;
  flex-wrap: unset;
  flex: 1;
  min-width: 0;
}
.repl-block .whitespace {
  white-space: pre-wrap;
}
.repl-block.processing .repl-output,
.repl-block.valid-response .repl-output {
  display: flex;
  /* align-items: flex-start; */
}
.repl-result-spinner {
  font-size: 0.875rem;
}
.repl-block .repl-output [data-stream] ~ .repl-result-spinner {
  /* probably not 100% right, but: for pty output, don't show kui's "caret", since xtermjs has its own */
  display: none;
}
.repl-block.processing .repl-result-spinner-inner {
  /* animation: spin 750ms linear infinite; */
  height: auto;
  width: auto;
  opacity: 1;
  transition-delay: 100ms; /* only show the spinner block if the command takes a bit longer */
  display: inline-block;
  background-color: var(--color-processing);
  margin-bottom: 0.25rem;
}
.repl-block.processing .repl-result-spinner-inner:after {
  content: '\00a0';
}
.repl-result pre {
  margin: 0; /* was: 2px 0, firefox needs some vertical padding, otherwise descenders like "y" crop; weird */
  white-space: pre-wrap;
}

/* e.g. reverse-i-search; see Input.tsx */
.repl-input-element.repl-input-hidden {
  opacity: 0;
  width: 0;
}

.repl {
  opacity: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  flex: 4;
}
.repl-inner {
  overflow-y: auto;
  flex: 1;
}
.repl,
.repl-input .repl-input-element {
  font-family: var(--font-monospace);
}

.repl-block {
  .repl-input {
    .kui--input-and-context {
      flex: 1;
      display: flex;
      align-items: flex-start;
    }
  }

  .repl-output {
    .repl-result {
      &.flex-column {
        /* see https://github.com/IBM/kui/issues/6291 */
        flex-wrap: nowrap;
      }
      pre:empty {
        display: none;
      }
    }

    .ok {
      display: none;
      color: var(--color-ok);
    }

    &.valid-response .oops {
      /* oops output often times doesn't word wrap nicely on its own, e.g. help/usage; issue #396 */
      word-break: break-all;
    }
  }
}
